<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
  <title>Exit 66 Jukebox</title>
  <link rel="stylesheet" href="jukebox.css" type="text/css" />    
  <meta http-equiv="Pragma" content="no-cache">
  <script language="javascript" src="/js/prototype.js" type="text/javascript"></script>
  <script language="javascript" src="/js/exit66jukebox.js" type="text/javascript"></script>
</head>

<script language="javascript">

var count = 0;

function cacheImages() {

    var f = function(start) {
        return function(req) {
            var rootNode = getXmlResponseNode(req.responseXML);
            if ((rootNode) && (rootNode.hasChildNodes())) {
                var currentAlbum = rootNode.firstChild;
                var albumId = getNodeText(currentAlbum.getElementsByTagName("id")[0]);
                var albumName = getNodeText(currentAlbum.getElementsByTagName("name")[0]);
                var elem = document.createElement('p');
                elem.innerHTML = albumName;
                $('label').appendChild(elem);
                var img = new Image();
                img.onload = function (start) { cacheImages(start + 1) } (start);
                img.src = '/showimg?albumid=' + albumId;
                
            }
        }
    } (count);
    
    var req = new Ajax.Request("/ws/albumlist",
        {
            method: "post", 
            parameters: "start=" + count + "&count=1",
            onComplete: f
        });
        
    count = count + 1;
        
}
</script>

<body>

<input type="button" onclick="cacheImages();" value="Cache Album Images" />

<div id="label" />
</body>
</html>
